<template>
  <div id="watch">
<el-container class="history">
  <el-header>播放历史</el-header>

</el-container>
    <el-row :gutter="24">

      <el-col :span="6" v-for="item in info" :key="item.id">

        <el-image class="el-img" @click="view(item)" :src="item.url"></el-image>

        <el-menu>
          <el-menu-item @click="view(item)">作者</el-menu-item>
          <el-menu-item v-text="item.auto" @click="view(item)"></el-menu-item>
        </el-menu>
        <el-menu>
          <el-menu-item @click="view(item)">描述</el-menu-item>
          <el-menu-item v-text="item.title" @click="view(item)"></el-menu-item>
        </el-menu>


      </el-col>




    </el-row>
    <el-card>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryItemInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryItemInfo.pageSize"
        layout="prev, pager, next" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>


<script>
  export default {
  data() {
  return {
  info: [],
  queryItemInfo: {
  query: '',
  pageNum: 1,
  pageSize: 12
  },
  total: 0,
  current: 1,



  }
  },
  methods:{
    async view(item) {
      console.log(item)
      localStorage.setItem("viewaddr", item.viewaddr)
      localStorage.setItem("viewid", item.id)
      await this.$http.post("nono/view/watch/watchLogs",{
        watchAddr:item.viewaddr,
        watchTotal:item.title
      },
      {
        headers: {
          "Authorization": "Bearer " +
            localStorage.getItem("accessToken")
        }
      }
      )
      this.$router.push(`/view`)
    },
    //条数变化时 调用
    handleSizeChange(size) {
      this.queryItemInfo.pageSize = size
      this.getInfo()
    },
    //页码值变化时 调用
    handleCurrentChange(current) {

      this.queryItemInfo.pageNum = current
      this.getInfo()
    },
    async getInfo() {

      const result = await this.$http.get("nono/view/history", {
        headers: {
          "Authorization": "Bearer " +
            localStorage.getItem("accessToken")
        },
        params: this.queryItemInfo
      })
      console.log(result)
      this.info = result.data.rows
      console.log(this.info)
      this.total = result.data.total

    }
  },
  created() {
    this.getInfo();
  }
  }


</script>

<style>
  .history{
    background-color: #0077AA;
  }
</style>
